// 3、类组件、函数组件、事件绑定、操作组件的状态、this指向的问题、更新组件状态
// 导入React
import React from 'react'

// 导入样式
import './Three.css'

// 类组件必须要继承React.Component
class Three extends React.Component {

    // 构造函数(会在组件初始化的时候执行)
    constructor() {
        // 调用父类构造函数
        super();
        // 方法三
        // 组件初始化的时候改变addScore方法内部this的指向，永远指向当前组件
        this.addScore = this.addScore.bind(this)
    }

    // 通过state定义类组件的状态
    state = {
        name: '张三',
        age: 20,
        score: 66,
        foods: ['西瓜', '苹果', '葡萄'],
        student: {
            name: '赵璐思',
            age: 20,
            sex: '女'
        }
    }
    // 定义函数，注意：这里的函数必须要采用箭头函数的写法，否则将来操作状态时会出问题
    asyHi = (e) => {
        // 阻止事件默认行为
        e.preventDefault()
        alert('你好！我是类组件')
        // axios.....
    }
    name = '我是类组件变量'
    updateName = () => {
        // 通过setState方法，触发响应式更新
        // 注意：这里的函数必须使用箭头函数，否则this的指向会出问题
        this.setState({
            name: '李四'
        })
    }
    updateAge = () => {
        this.setState({
            age: 30
        })
    }

    // 成绩--
    subScore() {
        this.setState({
            score: --this.state.score
        })
    }

    // 成绩++
    addScore() {
        this.setState({
            score: ++this.state.score
        })
    }

    // 添加食物
    addFoods = () => {
        // 操作状态，统一通过setState方法
        this.setState({
            // 更新数组，推荐使用展开运算符的方式在原有数据的基础上添加新的数据
            foods: [...this.state.foods,'桃子']
        })
    }

    // 更改对象数据年龄字段
    updateAge1 = () => {
        this.setState({
            student:{...this.state.student,age:30,name:'轩宇'}
        })
    }

    // 用于渲染组件的内容
    render() {
        // 解构出状态
        let {name, age, score , foods , student } = this.state
        return (
            <div className='three'>
                <h2>Three：类组件</h2>
                <p>{this.name}</p>
                {/* 调用类组件的成员，要使用this.xxx */}
                <button onClick={
                    this.asyHi
                }>类组件按钮
                </button>
                <a href="https://baidu.com" onClick={this.asyHi}>点击跳转百度</a>
                <hr/>
                <p>姓名：{name}</p>
                <p>年龄：{age}</p>
                <p>成绩：{score}</p>
                <div>
                    {/* 方法一 */}
                    <button onClick={this.updateName}>修改姓名</button>
                    <button onClick={this.updateAge}>修改年龄</button>
                    {/* 方法二 */}
                    {/* 点击的时候执行箭头函数，再去执行sub函数 */}
                    <button onClick={() => {
                        this.subScore()
                    }}>成绩--
                    </button>
                    {/* 方法三 */}
                    <button onClick={this.addScore}>成绩++</button>
                </div>
                <hr/>
                <ul>
                    {
                        foods.map((food,i) => {
                            return <li key={i}>{food}</li>
                        })
                    }
                </ul>
                <div>{ student.name + ' ' + student.age + ' ' + student.sex }</div>

                <button onClick={this.addFoods}>添加食物</button>
                <button onClick={this.updateAge1}>修改年龄</button>

            </div>
        )
    }

}

// 导出组件
export default Three
